<!-- 首页 -->
<template>

	<view class="container" style="padding-top: 0;">
		<headMenuRegion title="首页" :isIcon="false" :scheme-one="false">
			<template>
				<view class="row-between" style="width: 540rpx;">
					<view style="display: flex;align-items: center;">
						<image src="/static/logo.png" style="width: 60rpx;height: 52rpx;">
						</image>
						<view class="" style="font-size: 40rpx;font-weight: bold;margin-left: 18rpx">
							His系统小程序端
						</view>
					</view>
					<!-- <image src="/static/icon/icon_location.png" style="width: 48rpx;height: 54rpx;" mode=""></image> -->
				</view>
			</template>
		</headMenuRegion>
		
		<view class="location" @click="onLocation">
			<image src="/static/icon/icon_location.png" style="width: 48rpx;height: 54rpx;" mode=""></image>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" circular :autoplay="true" :interval="5000" :duration="1000">
			<swiper-item class="swiper-item">
				<image src="https://gd-hbimg.huaban.com/c647b539a1aff987f5f4b8c0453698210cc0b9973336c-SbIc4v_fw658webp"
					mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="https://gd-hbimg.huaban.com/2f8304c826d90d3607a4a639d51ef535bf897d994402f-iGFkNK"
					mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="https://gd-hbimg.huaban.com/a5892bec03d94911ba6805150056642496b6a7025d991-rE1z2d"
					mode="scaleToFill"></image>
			</swiper-item>
		</swiper>


		<!-- 添加就诊人 -->
		<view class="add">
			<view v-if="isShow">
				<view class="add-title">初次使用请添加就诊人</view>
				<view class="add-see-doctor" @click="onAddDoctor">
					添加就诊人
				</view>
			</view>
			
			<view v-else>
				<view class="add-title">请先登录</view>
				<view class="add-see-doctor" @click="onAddDoctor">
					登录
				</view>
			</view>
		
		</view>


		<!-- menu 菜单 -->
		<view class="menu">
			<view class="menu-for" v-for="(item, index) in menuList" :key="item.id" @click="nav(item.to)">
				<view class="menu-image">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="menu-text">
					{{item.text}}
				</view>
			</view>
		</view>

	<!-- 	<view class="be-on-duty">
			<view>
				今日值班医生
			</view>
			
			<view class="">
				查看查看更多
			</view>
		</view> -->
		<!-- 值班医生 -->
		<view v-if="doctorList.length != 0">
			<view class="doctor-list" v-for="(item, index) in doctorList" :key="index">
				<view class="doctor-list-image">
					<image src="/static/icon/icon_avatar.png" mode="aspectFill"></image>
				</view>
				<view class="doctor-list-content">
					<view class="doctor-name">{{ item.doctorName }}</view>
					<!-- <view class="doctor-department">{{item.department}}</view> -->
					<view class="doctor-advantage">{{item.department}}-{{item.type}}</view>
				</view>
			</view>
		</view>
		
		<empty v-else></empty>

	</view>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		mondayDuty,
		tuesdayDuty,
		wednesdayDuty,
		thursdayDuty,
		fridayDuty,
		saturdayDuty,
		sundayDuty,
		isLogin
	} from "@/api/index.js"

	const menuList = reactive([{
			id: '1',
			icon: '/static/icon/icon_register.png',
			text: '门诊挂号',
			to: '/view/register/selectOutpatients/index'
			// to: '/view/register/register/index'
		},
		{
			id: '2',
			icon: '/static/icon/icon_recipe.png',
			text: '门诊取药',
			to: '/view/recipe/index'
		},
		{
			id: '3',
			icon: '/static/icon/icon_scheduling.png',
			text: '值班医生',
			to: '/view/scheduling/index'
		},
		{
			id: '4',
			icon: '/static/icon/icon_log.png',
			text: '门诊记录',
			to: '/view/register/registerLog/index'
		}
	])

	const doctorList = ref([]);
	
	const isShow = ref(true);

	// 跳转
	function nav(url) {
		uni.navigateTo({
			url
		})
	}

	function onAddDoctor() {
		uni.navigateTo({
			url: '/view/user/patientList/index'
		})
	}

	// 获取今日值班列表
	async function getNowDutyList() {
		console.log("执行了")
		var today = new Date();
		var dayIndex = today.getDay();
		var daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
		var todayStr = daysOfWeek[dayIndex];
		let res = null;
		switch (todayStr) {
			case '星期一':
				res = await mondayDuty();
				break;
			case '星期二':
				res = await tuesdayDuty();
				break;
			case '星期三':
				res = await wednesdayDuty();
				break;
			case '星期四':
				res = await thursdayDuty();
				break;
			case '星期五':
				res = await fridayDuty();
				break;
			case '星期六':
				res = await saturdayDuty();
				break;
			case '星期日':
				res = await sundayDuty();
				break;
		}


		doctorList.value = res;
		console.log("doctorList", doctorList.value)

	}
	
	function onLocation() {
		console.log("执行")
		wx.openLocation({
		  latitude: 38.86914673550658,   // 目标纬度（例如北京）
		  longitude: 115.5448432255987, // 目标经度
		  name: '保定职业技术学院东校区（笃学楼）',
		  address: '保定市莲池区五四东路398号',
		  scale: 18
		})
		
		// uni.navigateTo({
		// 	url:'/view/map/index'
		// })
	}

	onLoad(() => {
		isLogin().then((res) => {
			if (res.code == 200) {
				isShow.value = true;
			} else {
				isShow.value = false;
			}
		})
		getNowDutyList()
	})
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		padding: 34rpx;
	}

	.row-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.swiper {
		overflow: hidden;

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			image {
				width: 726rpx;
				height: 318rpx;
			}
		}
	}


	// 添加
	.add {
		padding: 22rpx;
		border: 1rpx dashed #2BD1B9;
		background: #F2FAFA;
		border-radius: 20rpx;

		margin-top: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		.add-title {
			font-size: 28rpx;
			font-family: Source Han Sans;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			text-align: center;
			/* 纯黑 */
			color: #999;

		}

		.add-see-doctor {
			width: 348rpx;
			height: 82rpx;
			border-radius: 40rpx;
			background-color: #2BD1B9;
			margin-top: 16rpx;

			display: flex;
			justify-content: center;
			align-items: center;

			//  内部文字样式
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			/* White */
			color: #FFFFFF;
			margin-left: 11rpx;
		}
	}

	// 菜单
	.menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		margin-top: 30rpx;
		padding-bottom: 30rpx;

		.menu-for {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.menu-image {
				width: 94rpx;
				height: 94rpx;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.menu-text {
				text-align: center;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: normal;
				color: #000;
				margin-top: 16rpx;
			}
		}
	}

	.be-on-duty {
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: normal;
		/* 纯黑 */
		color: #000;
		padding-bottom: 20rpx;
	}


	// 医生列表
	.doctor-list {
		// border-radius: 22rpx;
		/* White */
		background: #FFFFFF;
		// box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		padding: 28rpx;
		border-bottom: 1rpx solid #D8D8D8;
		margin-bottom: 20rpx;
		border-radius: 20rpx;


		&:last-child {
			border-bottom: none;
		}


		.doctor-list-image {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.doctor-list-content {
			margin-left: 24rpx;

			.doctor-name {
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 32rpx;
				letter-spacing: normal;
				color: #333333;
			}

			.doctor-department {
				font-family: Source Han Sans;
				font-size: 20rpx;
				font-weight: normal;
				line-height: 24rpx;
				letter-spacing: normal;
				color: #666666;
				margin-top: 16rpx;
			}

			.doctor-advantage {
				margin-top: 16rpx;
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 24rpx;
				letter-spacing: normal;
				color: #666666;

			}
		}

	}
	
	.location {
		position: fixed;
		right: 20rpx;
		bottom: 300rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #2BD1B9;
		transition: transform 0.2s ease;
		 box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.4);
		&:active {
			animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
		}
	}
	@keyframes shake {
	  0% { transform: translateX(0); }
	  10% { transform: translateX(-5px); }
	  20% { transform: translateX(5px); }
	  30% { transform: translateX(-5px); }
	  40% { transform: translateX(5px); }
	  50% { transform: translateX(-5px); }
	  60% { transform: translateX(5px); }
	  70% { transform: translateX(-5px); }
	  80% { transform: translateX(5px); }
	  90% { transform: translateX(-5px); }
	  100% { transform: translateX(0); }
	}

</style>